<template>
    <div class="header bg-[#424242] text-[#b0b0b0] w-full">
        <div class=" base-width h-[40px] flex flex-row items-center justify-between ">
            <div class="title-left  h-full flex items-center flex-row text-[12px] ">
                <a href="#">小米商城</a>
                <a href="#">MiUI</a>
                <a href="#">LoT</a>
                <a href="#">云服务</a>
                <a href="#">天星数科</a>
                <a href="#">有品</a>
                <a href="#">小爱同学开放</a>
                <a href="#">企业团购</a>
                <a href="#">资质证照</a>
                <a href="#">协议规则</a>
                <a href="#">下载app</a>
                <a href="#">Select Location</a>
            </div>
            <div class="title-right  h-full flex items-center flex-row text-[12px] ">
                <span>欢迎登录：{{ loginClientInfo.custom_realName }}</span>
                <span @click="logOut">退出登录</span>
                <a @click="$router.push({ name: 'customCenter' })">个人中心</a>

                <div class="relative h-full z-10 group flex items-center flex-row justify-center ">
                    <router-link :to="{ name: 'myShopCarList' }" class="shop-car">购物车({{ shopCarGoodsTotalCount }})
                    </router-link>
                    <ul
                        class="absolute right-0 bg-white top-[40px] w-[200px] shadow-2xl hidden group-hover:block p-[10px]">
                        <li v-for="(item) in myShopCarList" :key="item.id"
                            class="flex flex-row items-center text-[12px] h-[50px] p-3 border-b border-solid border-gray-400 cursor-pointer hover:text-red-500">
                            <img :src="baseURL + item.goodsInfo.goods_photo[0]" class="w-[40px] h-[40px] object-contain"
                                alt="">
                            <span class="shop-car-goods_name">{{ item.goodsInfo.goods_name }}</span>
                            <span>[{{ item.car_goods_num }}]</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="base-width bg-white  w-full">
        <div class="base-width flex flex-row justify-between items-center h-[76px]">
            <img src="../img/logo.png" class="w-[56px] h-[56px]" @click="$router.push({ name: 'DataView' })" alt="">
            <div class="nav-bar flex flex-row text-black text-[14px]">
                <a href="#">Xiaomi手机</a>
                <a href="#">Redmi手机</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">平板</a>
                <a href="#">家电</a>
                <a href="#">路由器</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="right-query-box  ">
                <input type="text" class="query-input text-[#9ca3af]" placeholder="小米手机" v-model="keyword">
                <button class="query-btn bg-[#ff6a00]"
                    @click="$router.replace({ name: 'search', query: { keyword: keyword } })">搜索</button>
            </div>

        </div>
    </div>



</template>

<script setup>
import { computed, onMounted, ref, inject } from "vue";
import { mainStore } from "../store";
import { storeToRefs } from "pinia";
import { ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import API from "../utils/API";
const router = useRouter();
const store = mainStore();
// const isCollapse=computed(()=>store.isCollapse);
const loginClientInfo = ref(mainStore().loginClientInfo)
const baseURL = inject("baseURL");


/**
 * 获取我的购物车列表
 */
const myShopCarList = ref([]);
const getMyShopCarList = () => {
    API.shopCarInfo.getMyShopCarList()
        .then(result => {

            result.forEach(item => {
                item.goodsInfo.goods_photo = JSON.parse(item.goodsInfo.goods_photo);
            })
            myShopCarList.value = result;
        })
        .catch(() => {
            console.log("获取我的购物车列表失败");
        })
}
const shopCarGoodsTotalCount = computed(() => {
    let totalCount = 0;
    myShopCarList.value.forEach(item => {
        totalCount += item.car_goods_num

    })
    return totalCount;
})



onMounted(() => {
    if (loginClientInfo.value) {
        getMyShopCarList();
    }
})


/**
 * 退出登录
 */
const logOut = () => {
    ElMessageBox.confirm("你确定要退出吗?", "系统提示", {
        confirmButtonText: '确定退出',
        cancelButtonText: '我点错了',
        type: 'warning',
    }).then(() => {
        store.logOut();
        router.replace({ name: 'Login' })``
    }).catch(() => {

    })
}
/**
 * 搜索功能
 */
const keyword = ref("");

</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    background-color: #424242;
}

.title-left,
.title-right {

    a,
    span {
        @apply cursor-pointer mr-10;

        &:hover {
            @apply text-primaryColor
        }
    }
}

.right-query-box {
    @apply w-[296px] border border-solid border-gray-400 flex flex-row items-center h-[40px] box-border;

    &:focus-within {
        .query-btn {
            border-color: #ff6700;
        }
    }

    .query-input {
        @apply outline-none px-[10px] text-[12px] flex-1;
    }

    .query-btn {
        @apply w-[50px] h-full border-l border-solid border-gray-400 text-[12px];
    }
}

.el-button {
    color: white
}

.nav-bar {
    a {
        @apply mx-12;

        &:hover {
            @apply text-primaryColor
        }
    }
}
</style>